<template>


    <div class="app-container" style="margin-left: 200px">
      <el-container>
        <el-row class="tac">
          <el-col :span="24">
            <el-menu
              ref="menus"
              default-active="1"
              class="el-menu-vertical-demo">


                  <el-menu-item index="1" @click="to('/ucenter/myinfo')">
                    <i class="el-icon-location"></i>
                    <span slot="title">个人编辑</span>
                  </el-menu-item>

                  <el-menu-item index="2" @click="to('/ucenter/editpass')" >
                    <i class="el-icon-menu"></i>
                    <span slot="title">修改密码</span>
                  </el-menu-item>

              <el-menu-item index="3" @click="to('/ucenter/myorder')">

                <i class="el-icon-setting"></i>
                <span slot="title">我的订单</span>

              </el-menu-item>
              <el-menu-item index="4" @click="to('/ucenter/mycomment')">
                <i class="el-icon-document"></i>
                <span slot="title">我的评论</span>
              </el-menu-item>


            </el-menu>
          </el-col>
        </el-row>


          <el-main >
            <el-form ref="form" :rules="rules" :model="form" style="width: 80%;" label-width="80px">
              <el-form-item label="头像">
                <!-- 头衔缩略图 -->
                <pan-thumb :image="form.avatar"/>
                <!-- 文件上传按钮 -->
                <el-button type="primary" icon="el-icon-upload" @click="imagecropperShow=true">更换头像
                </el-button>
                <image-cropper
                  v-show="imagecropperShow"
                  :width="300"
                  :height="300"
                  :key="imagecropperKey"
                  url="/member/uploadAvatar"
                  field="file"
                  @close="close"
                  @crop-upload-success="cropSuccess"
                />
              </el-form-item>
              <el-form-item label="昵称"  prop="nickname">
                <el-input v-model="form.nickname"></el-input>
              </el-form-item>
              <el-form-item label="性别">
                <el-select v-model="form.sex" placeholder="请选性别">
                  <el-option label="男" :value="2"></el-option>
                  <el-option label="女" :value="1"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="年龄">
                <el-input v-model="form.age"></el-input>
              </el-form-item>
              <el-form-item label="邮箱" prop="email">
                <el-input v-model="form.email" type="email"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSubmit()">确定</el-button>
                <el-button @click="congz">取消</el-button>
              </el-form-item>
            </el-form>
          </el-main>
      </el-container>

    </div>

 </template>

<script>
import ImageCropper from '@/components/ImageCropper/index.vue'
import PanThumb from '@/components/PanThumb/index.vue'
import ordersApi from '@/api/orders'
import memberApi from '@/api/member'
import comment from '@/api/comment'
import cookie from "js-cookie";
export default {

  components: {ImageCropper, PanThumb},
  name: "ucenter",
  data() {
    return {
      form: {
        id: '',
        nickname: '',
        sex: '',
        age: '',
        avatar: '',
        email: '',
      },
      rules: {
        avatar: [
          {required: true, message: '头像必选', trigger: 'blur'},
        ],
        nickname: [
          {required: true, message: '请输入昵称', trigger: 'blur'},
        ],
        email: [
          {pattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/, message: '请输入正确的邮箱', trigger: 'blur'},
        ],
      },
      imagecropperShow: false,
      imagecropperKey: 0,
    }
  },
  created() {
    var frontMember = cookie.get("front_member");
    if (frontMember)
    {
      var user = JSON.parse(frontMember);

      console.log(user)
      this.form.id=user.id
      this.form.nickname=user.nickname
      this.form.avatar=user.avatar
      this.form.sex=user.sex
      this.form.age=user.age
      this.form.email=user.email
    }

  },
  methods: {
    to(router){
      this.$router.push({
        path: router
      })
    },
    cropSuccess(data) {
      console.log(data)
      this.imagecropperShow = false
      this.form.avatar = data
      this.imagecropperKey = this.imagecropperKey + 1
    },

    close() {
      this.imagecropperShow = false
      this.imagecropperKey = this.imagecropperKey + 1
    },
    congz() {
      this.form = {
        id: '',
        nickname: '',
        email: '',
        sex: '',
        age: '',
        avatar: ''
      }
    },
    onSubmit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          memberApi.saveOrUpdate(this.form).then((res) => {
            this.$message.success("操作成功");
            cookie.set('front_member', JSON.stringify(res.data));
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });

    },
  }
}
</script>

<style scoped>

</style>
